<div
  class="position-relative pt-md-6 pt-4 {% if forloop.first %} mt-md-0 mt-0 {% else %} mt-md-5 mt-4 {% endif %} as-scroll-content"
  id="as-{{ section.id }}-{{ forloop.index0 }}-{{ item.handle }}"
>
  <h3 class="text-md-center mb-4">{{ item.title }}</h3>
  <div class="">
    <div class="d-flex flex-column flex-center">
      <div class="w-100 flex-grow-1">
        <div class="accordion accordion-flush">
          {%- for article in faq_blog_posts.articles -%}
            <div class="accordion-item border-bottom bg-transparent {% if forloop.first %} border-top {% else %} {% endif %}">
              <div
                class="accordion-header"
                id="accordion-{{ section.id }}-{{ article.title | truncatewords: 2 | handleize }}-{{ forloop.index0 }}"
              >
                <button
                  class="accordion-button collapsed bg-transparent px-0 py-4"
                  type="button" 
                  data-bs-toggle="collapse"
                  data-bs-target="#as-accordion-collapse-{{ section.id }}-{{ article.title | truncatewords:  2 | handleize }}-{{ forloop.index0 }}"
                  aria-expanded="false"
                  aria-controls="as-accordion-collapse-{{ section.id }}-{{ article.title | truncatewords: 2 | handleize }}-{{ forloop.index0 }}"
                >
                  <span class="pe-3">{{ article.title }}</span>
                </button>
              </div>
              <div
                id="as-accordion-collapse-{{ section.id }}-{{ article.title | truncatewords: 2 | handleize }}-{{ forloop.index0 }}"
                class="accordion-collapse collapse bg-transparent"
                aria-labelledby="accordion-{{ section.id }}-{{ article.title | truncatewords: 2 | handleize }}-{{ forloop.index0 }}"
              >
                <div class="richtext-description accordion-body text-muted fs-small px-0 pt-0 pb-4">
                  {{ article.content }}
                </div>
              </div>
            </div>
          {%- endfor -%}
        </div>
      </div>
    </div>
  </div>
</div>
